﻿(function () {
    "use strict";

    var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
    var ui = WinJS.UI;

    ui.Pages.define("/pages/groupDetail/groupDetail.html", {
        /// <field type="WinJS.Binding.List" />
        _items: null,

        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {

            this.setAppBarCommands("group1");

            var listView = element.querySelector(".itemslist").winControl;
            
            this.bindControls(listView, element, options);

            this._initializeLayout(listView, Windows.UI.ViewManagement.ApplicationView.value);

            listView.element.focus();
        },

        setAppBarCommands: function (groupKey) {
            appbar.winControl.disabled = false;
            appbar.winControl.hideCommands([markItem]);
            appbar.winControl.showCommands([pinGroup]);
            MyAppBar.setPinButton(groupKey);
        },

        bindControls: function (listView, element, options) {
            var group = (options && options.groupKey) ? Data.resolveGroupReference(options.groupKey) : Data.groups.getAt(0);
            this._items = Data.getItemsFromGroup(group);
            var pageList = this._items.createGrouped(
                function groupKeySelector(item) { return group.key; },
                function groupDataSelector(item) { return group; }
            );

            element.querySelector("header[role=banner] .pagetitle").textContent = group.title;

            listView.itemDataSource = pageList.dataSource;
            listView.itemTemplate = element.querySelector(".itemtemplate");
            listView.groupDataSource = pageList.groups.dataSource;
            listView.groupHeaderTemplate = element.querySelector(".headertemplate");
            listView.oniteminvoked = this._itemInvoked.bind(this);
        },

    unload: function () {
        this._items.dispose();
    },

    // This function provides the Elements to be animated by PageControlNavigator on Navigation.
    getAnimationElements: function () {
        return [[this.element.querySelector("div .item")]];
    },

    // This function updates the page layout in response to viewState changes.
    updateLayout: function (element, viewState, lastViewState) {
        /// <param name="element" domElement="true" />

        var listView = element.querySelector(".itemslist").winControl;
        if (lastViewState !== viewState) {
            if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
                var handler = function (e) {
                    listView.removeEventListener("contentanimating", handler, false);
                    e.preventDefault();
                }
                listView.addEventListener("contentanimating", handler, false);
                var firstVisible = listView.indexOfFirstVisible;
                this._initializeLayout(listView, viewState);
                if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
                    listView.indexOfFirstVisible = firstVisible;
                }
            }
        }
    },

    // This function updates the ListView with new layouts
    _initializeLayout: function (listView, viewState) {
        /// <param name="listView" value="WinJS.UI.ListView.prototype" />

        if (viewState === appViewState.snapped) {
            listView.layout = new ui.ListLayout();
        } else {
            listView.layout = new ui.GridLayout({ groupHeaderPosition: "left" });
        }
    },

    _itemInvoked: function (args) {
        var item = this._items.getAt(args.detail.itemIndex);
        WinJS.Navigation.navigate("/pages/itemDetail/itemDetail.html", { item: Data.getItemReference(item) });
    }
});
})();
